<template>

    <div class="login-container">
        <el-form
                :model="ruleForm"
                :rules="rules"
                status-icon
                ref="formName"
                label-position="left"
                label-width="0px"
                class="demo-ruleForm login-page"
        >
            <h3 class="title">系统登录</h3>
            <el-form-item prop="userName">
                <el-input type="text" v-model="ruleForm.name" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
                <el-input type="passWord" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;"  @click="submitForm" >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    password: '',

                },
                rules: {
                    userName: [
                        {
                            required: true,
                            message: "请输入您的名字",
                            trigger: "blur"
                        }
                    ],
                    passWord: [
                        { required: true, message: "请输入您的学号", trigger: "blur" }
                    ],
                    role: [
                        {
                            required: true,
                            message: "请选择角色",
                            trigger: "blur"
                        }
                    ]
                },
                checked: false
            };
        },
        methods: {


            submitForm() {

                    const _this = this
                    this.$refs.formName.validate((valid) => {
                        if (!valid) {
                            axios.get('http://localhost:8181/login/'+this.ruleForm.name+"/"+this.ruleForm.password).then(function (resp) {
                                if (resp.data == 'success') {
                                     localStorage.setItem('root',{name:_this.ruleForm.name,password:_this.ruleForm.password})
                                    _this.$message('登录成功！！！')
                                    _this.$router.push({
                                        path:'/studentInfo',
                                    })
                                }
                            })

                        } else {
                            _this.$message('请重新登录！')
                            return false;
                        }
                    });


            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style scoped>
    .login-container {
        width: 100%;
        height: 100%;
        background: beige;
    }
    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
</style>